<template>
  <div class="container">
    <back-header
      class="header"
      title="音频参数"
      :needConfirm="true"
    ></back-header>
    <el-form
      ref="detailForm"
      :model="formData"
      label-width="120px"
      class="grid"
      :rules="rules"
    >
      <div>
        <el-form-item label="模板名称" prop="templateName">
          <el-input
            v-model="formData.templateName"
            :maxlength="10"
            style="width: 200px"
            placeholder="请输入模板名称"
          />
        </el-form-item>
        <el-form-item label="状态" prop="statusMark">
          <dict-select
            v-model="formData.statusMark"
            dict-key="process_status"
          />
        </el-form-item>
        <el-form-item label="自动转码" prop="autoTranscoding">
          <dict-radio v-model="formData.autoTranscoding" dict-key="yes_no" />
        </el-form-item>
        <el-form-item label="封装格式" prop="audioType">
          <dict-radio
            v-model="formData.audioType"
            @change="audioTypeChange"
            dict-key="audio_type"
            class="c-line"
          />
        </el-form-item>
      </div>
      <div>
        <el-form-item label="码率" prop="bitrate">
          <el-input-number
            step-strictly
            :controls="false"
            v-model="formData.bitrate"
            :max="1000"
            :min="8"
            :step="1"
            class="mr-15 text-right"
          />kbps
        </el-form-item>
        <el-form-item label="采样率" prop="sampleRate">
          <el-select v-model="formData.sampleRate" class="mr-15">
            <el-option
              v-for="item in sampleRateMap"
              :key="item"
              :value="item"
              :disabled="item === 96000 && formData.audioType === 'mp3'"
            >
              {{ item }}
            </el-option> </el-select
          >HZ
        </el-form-item>
        <el-form-item label="声道" prop="channels">
          <el-select v-model="formData.channels">
            <el-option v-for="item in channelsMap" :key="item" :value="item">
              {{ item }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="音量调整方式" prop="volumeAdjustment">
          <dict-radio
            v-model="formData.volumeAdjustment"
            dict-key="volume_adjustment"
          />
        </el-form-item>
      </div>
    </el-form>
    <div class="btns">
      <el-button type="primary" @click="saveData">保存</el-button>
      <el-button plain type="primary" @click="btnLeave">取消</el-button>
    </div>
  </div>
</template>

<script>
import BackHeader from "@/components/BackHeader/index";
import DictSelect from "@/components/DictSelect";
import DictRadio from "@/components/DictRadio";
import { vaildateInput } from "@/utils/validate";
import { detail, edit, add } from "@/api/system-config/audio-transcode";
import leave from "@/views/_mixins/leave";
const defaultForm = {
  templateName: "",
  statusMark: 1,
  autoTranscoding: 1,
  audioType: "aac",
  bitrate: 128,
  channels: 1,
  sampleRate: 44100,
  volumeAdjustment: "auto",
};
export default {
  name: "transcode-audio-form",
  components: {
    BackHeader,
    DictSelect,
    DictRadio,
  },
  mixins: [leave],
  data() {
    return {
      ratio: 1,
      lock: true,
      formData: {},
      rules: {
        templateName: [
          { required: true, message: "模板名称不能为空" },
          { validator: vaildateInput, trigger: ["blur", "change"] },
        ],
      },
      sampleRateMap: [22050, 32000, 44100, 48000, 96000],
      channelsMap: [1, 2, 4, 5, 6, 8],
    };
  },
  created() {
    this.$id = this.$route.query.id;
    this.$id ? this.getData() : (this.formData = {...defaultForm});
  },
  methods: {
    getData() {
      detail(this.$id, this.formData).then((res) => {
        this.formData = res;
      });
    },
    saveData() {
      this.$refs.detailForm.validate((valid) => {
        if (valid) {
          if (this.$id) {
            edit(this.$id, this.formData).then(() => {
              this.$message.success("编辑成功!");
              this.$router.back();
            });
          } else {
            add(this.formData).then(() => {
              this.$message.success("新增成功!");
              this.$router.back();
            });
          }
        }
      });
    },
    audioTypeChange() {
      if (
        this.formData.audioType === "mp3" &&
        this.formData.sampleRate === 96000
      ) {
        this.formData.sampleRate = 44100;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 50px;
}
.header {
  margin-bottom: 30px;
}
.container {
  padding: 20px 18px;
  background-color: #fff;
  min-height: 100%;
  position: relative;
}
.ratio-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
.custom-ratio {
  display: flex;
}
.ratio-checkbox {
  margin-left: 35px;
}
.ninput {
  width: 85px;
}
.ration-label {
  margin-right: 15px;
}
.mt-25 {
  margin-top: 25px;
}
.mr-15 {
  margin-right: 15px;
}
.tip {
  font-weight: 400;
  color: #8d8d8d;
  line-height: 23px;
  font-size: 12px;
}
.btns {
  position: absolute;
  left: 28px;
  bottom: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.text-right {
  :deep(.el-input) {
    input {
      text-align: right;
    }
  }
}
.c-line{
  ::v-deep .el-radio{
  margin-bottom: 15px;
}

}
</style>
